import SEO from '../components/SEO'

<SEO
  title="Box"
  description="Box is the most abstract component on top of which all other @chakra-ui/vue components are built. By default, it renders a `div` element"
/>


# Box

`CBox` is the most abstract component on top of which all other `@chakra-ui/vue` components are built. By default, it renders a `div` element.

<br />

**The `CBox` component is useful because it helps with three common use cases:**
- Creation of responsive layouts with ease.
- Provides a shorthand way to pass styles via props (`bg` instead of `backgroundColor`).
- Composition of new components by providing for overrides by using the `as` prop.

<carbon-ad />

## Import

```js
import { CBox } from '@chakra-ui/vue';
```

## Usage

```vue live=true
<c-box bg="tomato" w="100%" p="4" color="white">
  This is the Box
</c-box>
```

## Composition with `CBox`

```vue live=true
<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
    <c-box p="6">
      <c-box d="flex" align-items="baseline">
        <c-badge rounded="full" px="2" variant-color="green">
          New
        </c-badge>
        <c-box
          color="gray.500"
          font-weight="semibold"
          letter-spacing="wide"
          font-size="xs"
          text-transform="uppercase"
          ml="2"
        >
          {{ property.beds }} beds &bull; {{ property.baths }} baths
        </c-box>
      </c-box>
      <c-box
        mt="1"
        font-weight="semibold"
        as="h4"
        line-height="tight"
        is-truncated
      >
        {{ property.title }}
      </c-box>
      <c-box>
        {{ property.formattedPrice }}
        <c-box as="span" color="gray.600" fontSize="sm">
          / wk
        </c-box>
      </c-box>
      <c-box d="flex" mt="2" align-items="center">
        <c-icon
          v-for="(_, i) in Array(5).fill('')"
          name="star"
          :key="i"
          :color="i < property.rating ? 'green.500' : 'gray.300'"
        />
        <c-box as="span" ml="2" color="gray.600" font-size="sm">
          {{ property.reviewCount }} reviews
        </c-box>
      </c-box>
    </c-box>
  </c-box>
</template>

<script>
  export default {
    name: 'Example',
    data () {
      return {
        property: {
          imageUrl: "https://bit.ly/2Z4KKcF",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title: "Modern home in city center in the heart of historic Los Angeles",
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        }
      }
    }
  }
</script>
```

### `as` prop

You can use the `as` prop to change the element render, like the `tag` prop on Vue's global dynamic component.

```vue live=true
<c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
  Button
</c-box>
```

## Props
See all `CBox` props in the <nuxt-link to="style-props">Style Props page</nuxt-link>
